<template>
	<view class="p20 h100vh">
		<view class="ox-auto  br--20 p20">
			<view class="flex  ox-auto w-max">
				<view @click="orderStateChange(item.status)" :class="orderState == item.status ? 'active' : ''"
					class="pr center  vvl40 fs32 fw p10" v-for="(item,index) in tabList" :key="index">
					<view class="">{{item.label}}</view>
					<image v-show="orderState == item.status" src="../../static/tabs-underline.png" mode="widthFix">
					</image>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view oy-auto  pr h100 " @scrolltolower="getMore">
			<view class="p20 bag--fff mt20 br--20" v-for="(item,index) in list" :key="index"
				@click="goto(`/pages/index/PublicDetails?id=${item.id}`)">
				<view class="f16 hg-48">
					{{item.title}}
				</view>
				<view class="right mt20 f12 co--999">
					{{item.sent_date}}
				</view>
			</view>
			<myEmpty v-if="list.length==0"></myEmpty>
			<view class="center fs12 co--999 mt10" v-else>
				上滑加载更多
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderState: 0,
				tabList: [],
				pageNo: 1,
				list: []
			}
		},
		onLoad() {
			this.getlist()
			this.policylists()
		},
		methods: {
			resetArr() {
				this.pageNo = 1
				this.list = []
			},
			async getlist() {
				let {
					data
				} = await this.$rqt.policydetail()
				// this.list = data
				console.log(data, 'tab')
				this.tabList.unshift({
					status: 0,
					label: "全部"
				});
				data.forEach(item => {
					this.tabList.push({
						status: item.id,
						label: item.name
					});
				});
			},
			async policylists() {
				let {
					data
				} = await this.$rqt.policylists({
					policy_cat_id: this.orderState,
					page_no: this.pageNo
				})
				this.list.push(...data.lists)
			},
			orderStateChange(id) { // 订单状态变化
				if (this.orderState !== id) {
					this.orderState = id
					this.resetArr()
					this.policylists()
				}
			},
			getMore() {
				this.pageNo++
				this.policylists()
				console.log(this.pageNo)
			},

		}
	}
</script>

<style lang="scss">
	.w-max {
		width: max-content;

		.active {
			color: var(--cg);
		}

		image {
			width: 20rpx;
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.vvl40+.vvl40 {
		margin-left: 40rpx;
	}

	.w3 {
		width: 3em;
	}
</style>